AJAX রিকোয়েস্ট হচ্ছে একটি ওয়েব পেজের মাধ্যমে সার্ভারে ডেটা পাঠানোর এবং সার্ভার থেকে ডেটা ফেরত নেওয়ার প্রক্রিয়া। এটি ওয়েব পেজকে পুনরায় লোড না করে শুধুমাত্র নির্দিষ্ট অংশ আপডেট করতে সাহায্য করে, ফলে ইউজার ইন্টারফেস আরও ইন্টারঅ্যাকটিভ এবং দ্রুত হয়।
AJAX রিকোয়েস্ট সাধারণত দুই ধরনের হয়ে থাকে:
XMLHttpRequest ব্যবহার করে AJAX Request// XMLHttpRequest তৈরি
const xhr = new XMLHttpRequest();
// GET রিকোয়েস্ট সেট করা
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
// রিকোয়েস্ট সম্পন্ন হলে এই ফাংশনটি চলবে
xhr.onload = function() {
if (xhr.status === 200) {
// রেসপন্সের ডেটা JSON ফরম্যাটে পেতে
const data = JSON.parse(xhr.responseText);
console.log(data); // কনসোলে ডেটা দেখানো হবে
} else {
console.error('Error:', xhr.status);
}
};
// রিকোয়েস্ট পাঠানো
xhr.send();
ব্যাখ্যা: এই কোডে একটি GET রিকোয়েস্ট করা হয়েছে, যার মাধ্যমে সার্ভারের থেকে কিছু ডেটা (যেমন, পোস্টের তালিকা) পাওয়া যাবে। সার্ভারের রেসপন্স পেলে তা কনসোলে প্রদর্শিত হবে।
// XMLHttpRequest তৈরি
const xhr = new XMLHttpRequest();
// POST রিকোয়েস্ট সেট করা
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
// হেডারে কন্টেন্ট টাইপ নির্ধারণ করা
xhr.setRequestHeader('Content-Type', 'application/json');
// রিকোয়েস্ট সম্পন্ন হলে এই ফাংশনটি চলবে
xhr.onload = function() {
if (xhr.status === 201) {
// রেসপন্সের ডেটা JSON ফরম্যাটে পেতে
const data = JSON.parse(xhr.responseText);
console.log('Data Posted:', data);
} else {
console.error('Error:', xhr.status);
}
};
// পাঠানো ডেটা
const postData = JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
});
// রিকোয়েস্ট পাঠানো
xhr.send(postData);
ব্যাখ্যা: এই কোডে একটি POST রিকোয়েস্ট পাঠানো হয়েছে যেখানে একটি JSON অবজেক্ট (যেমন, একটি নতুন পোস্ট) সার্ভারে পাঠানো হয়েছে। রেসপন্স পেলে তা কনসোলে প্রদর্শন করা হবে।
XMLHttpRequest এর অন্যান্য ফাংশনopen()এই মেথড রিকোয়েস্টের ধরন (GET, POST ইত্যাদি), URL এবং অ্যাসিনক্রোনাস বা সিনক্রোনাস মোড নির্ধারণ করে।
Syntax:
xhr.open(method, url, async);
send()এটি রিকোয়েস্ট সার্ভারে পাঠায়। GET রিকোয়েস্টের জন্য সাধারণত এই মেথডে কোনো ডেটা প্রয়োজন হয় না, কিন্তু POST রিকোয়েস্টে সাধারণত ডেটা পাঠানো হয়।
Syntax:
xhr.send(data);
setRequestHeader()এই মেথড ব্যবহার করে রিকোয়েস্টের হেডারে অতিরিক্ত ইনফরমেশন (যেমন, কন্টেন্ট টাইপ) যোগ করা যায়।
Syntax:
xhr.setRequestHeader(header, value);
onload: রিকোয়েস্ট সফল হলে এই ইভেন্ট ট্রিগার হয়।onerror: রিকোয়েস্টে কোনো সমস্যা হলে এই ইভেন্ট ট্রিগার হয়।onreadystatechange: এই ইভেন্ট রিকোয়েস্টের প্রতিটি স্টেটাস পরিবর্তনে ট্রিগার হয়, তবে এটি আধুনিক কৌশলে কম ব্যবহৃত হয়।AJAX রিকোয়েস্ট হল একটি ওয়েব পেজ থেকে সার্ভারে ডেটা পাঠানোর এবং গ্রহণ করার প্রক্রিয়া যা পেজ রিলোড না করে শুধুমাত্র নির্দিষ্ট অংশ আপডেট করতে সাহায্য করে। XMLHttpRequest (XHR) ব্যবহার করে GET এবং POST রিকোয়েস্ট করা যেতে পারে। AJAX এর মাধ্যমে ওয়েব অ্যাপ্লিকেশন দ্রুত এবং ইন্টারঅ্যাকটিভ হয়ে ওঠে, তবে এটি ব্যবহারের সময় কিছু সীমাবদ্ধতা যেমন CORS সমস্যা, জাভাস্ক্রিপ্ট নির্ভরতা এবং SEO সমস্যা হতে পারে।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
